<template>
  <div class="scheme">
    <div class="query">
      <el-input
        style="width: 220px"
        v-model="query.inspector"
        placeholder="请输入巡检人"
        clearable
      ></el-input>
      <el-date-picker
        v-model="query.inspection_date"
        type="date"
        value-format="yyyy-MM-dd"
        :picker-options="pickerOptions"
        placeholder="请选择巡检日期"
      >
      </el-date-picker>
      <el-button type="primary" @click="getTable">查询</el-button>
    </div>
    <div class="oper">
      <el-button type="primary" @click="add">新增</el-button>
    </div>
    <div class="table">
      <el-table :data="tableData">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="inspector" label="巡检人"></el-table-column>
        <el-table-column
          prop="inspection_date"
          label="巡检日期"
        ></el-table-column>
        <el-table-column label="操作" width="160">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="edit(scope.row)"
              >编辑</el-button
            >
            <el-button @click="toAbnormal(scope.row)" type="text" size="small"
              >异常设备</el-button
            >
            <el-button
              @click="deleteTable(scope.row)"
              type="text"
              size="small"
              style="color: red"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog :show-close="false" :visible.sync="dialogVisible" width="30%">
        <span>是否删除此条巡检记录？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="close">取 消</el-button>
          <el-button type="primary" @click="confirm">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { searchInspections, deleteInspection } from '@/api/index';
export default {
  name: 'InspectionScheme',
  data() {
    return {
      query: {
        inspector: '',
        inspection_date: '',
      },
      tableData: [],
      pickerOptions: {
        disabledDate: (date) => {
          // 在这里编写自定义的日期禁用逻辑
          // 返回true表示禁用该日期，返回false表示启用该日期
          // 例如，禁用所有今天之前的日期：
          return date > new Date();
        },
      },
      inspection_id: '',
      dialogVisible: false,
    };
  },
  mounted() {
    this.getTable();
  },
  methods: {
    async confirm() {
      await deleteInspection({ inspection_id: this.inspection_id });
      this.$message.success('删除成功');
      this.getTable();
      this.close();
    },
    close() {
      this.dialogVisible = false;
    },
    async getTable() {
      this.tableData = await searchInspections(this.query);
    },
    edit(data) {
      this.$router.push({
        path: '/form',
        query: {
          oper: 1,
          inspection_id: data.inspection_id,
          inspection_date: data.inspection_date,
          inspector: data.inspector,
        },
      });
    },
    add() {
      this.$router.push({
        path: '/form?oper=0',
      });
    },
    toAbnormal(data) {
      this.$router.push({
        path: '/abnormal',
        query: {
          inspection_id: data.inspection_id,
          inspection_date: data.inspection_date,
          inspector: data.inspector,
        },
      });
    },
    async deleteTable(data) {
      this.inspection_id = data.inspection_id;
      this.dialogVisible = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.scheme {
  padding: 40px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .query {
    display: flex;
    gap: 20px;
  }
  .oper {
    padding: 20px 0;
  }
  .table {
    flex: 1;
  }
}
</style>
